<template>
	<div class="about">
		<el-card class="box-card">
			<div slot="header" class="clearfix headerTitle">
				<span class="headerInfo">作者:自由</span>
				<div class="user_img"><img src="../../assets/img/img.jpg"></div>
			</div>
			<div class="text item">
				<h4 class="h3text">地址:天津</h4>
				<h4 class="h3text">邮箱:lvchengjuntime@163.com</h4>
				<h4 class="h3text">简介：</h4>
				<div style="text-indent: 2em">
					个人比较喜欢一个人找个安静的地方看书，偶尔会出去溜达溜达看看各处的风景，打打球，喜欢交朋友。精通BS方面全栈开发,比较熟悉医院公众号,物业CMS,进销存,仓储,生产,物流等方面业务开发,擅长语言java,Python方面BS开发，数据库擅长oracle和mysql。手机app开发比较擅长混合开发.微信方面，擅长微信公众号和小程序,前台使用比较多的vue和jquery,比较擅长的是vue。
				</div>
			</div>
		</el-card>

		<el-card class="box-card">
			<div slot="header" class="clearfix headerTitle">
				<span class="headerInfo">个人技术：</span>
			</div>
			<div class="text item">
				<h4 class="h3text">前端:jQuery、Vue、Angular</h4>
				<h4 class="h3text">前端框架:easyui、element ui、mpvue、mui...</h4>
				<h4 class="h3text">后端：C#、java、python、php</h4>
				<h4 class="h3text">后端框架：.netMVC、sping boot、spring MVC、SSH、SSM、Flask、django、ThinkPhp</h4>
				<h4 class="h3text">客户端：winform、WPF</h4>
				<h4 class="h3text">数据库：sql server、Mysql、oracle、PostgreSQL</h4>
			</div>
		</el-card>

		<el-card class="box-card">
			<div slot="header" class="clearfix headerTitle">
				<span class="headerInfo">赞助作者：</span>
			</div>
			<div class="text item" style="text-align:center">
				<img class="hidden-xs-only zanshang" src="../../assets/img/zanshang.jpg" >
				<img class="hidden-sm-and-up zanshang_xs" src="../../assets/img/zanshang.jpg" >
			</div>
		</el-card>

		<el-card class="box-card hidden-xs-only">
			<div slot="header" class="clearfix headerTitle">
				<span class="headerInfo">联系方式：</span>
			</div>
			<div class="text item">
				<img class="qqQr_img" src="../../assets/img/qqQr.jpg">
				<div class="wechatQr_img">
					<img src="../../assets/img/wechatQrImg.jpg">
				</div>
			</div>
		</el-card>
		<div class="hidden-sm-and-up" style="margin-bottom: 18rem;"></div>
	</div>
</template>

<script>
	export default {
		metaInfo: {
			title: '自由的个人博客——关于', // set a title
			meta: [{ // set meta
				name: '个人自我介绍,个人技术介绍，联系方式,联系作者',
				content: '自由的个人博客，向往自由，希望自己的梦想可以实现，平凡的生活，在技术的海洋里让梦想启航。'
			}],
			link: [{ // set link
				rel: 'asstes',
				href: 'http://www.mxdqh.top/'
			}]
		},
	}
</script>

<style>
	.headerInfo {
		font-size: 20pt;
		font-family: "黑体";
	}


	.user_img {
		margin-left: 20px;
		float: right;
	}

	.user_img img {
		display: block;
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}

	.wechatQr_img {
		background-color: red;
		width: 200px;
		height: 200px;
		/* margin-left: 20px; */
		float: right;
	}

	.qqQr_img {
		width: 12.5rem;
		height: 12.5rem;
		border-radius: 5%;
	}

	.wechatQr_img img {
		/* display: block; */
		width: 200px;
		height: 200px;
		border-radius: 10%;
	}

	.zanshang {
		/* display: block; */
		width:12.5rem;
		height: 12.5rem;
		border-radius: 10%;
	}

	.zanshang_xs {
		/* display: block; */
		width: 9.5rem;
		height:9.5rem;
		border-radius: 10%;
	}

	.text {
		font-size: 14px;
	}

	.item {
		margin-bottom: 15px;
	}

	.h3text {
		margin-bottom: 8px;
	}

	.about .clearfix:before,
	.about .clearfix:after {
		display: table;
		content: "";
	}

	.about .clearfix:after {
		clear: both
	}

	.about {
		padding: 10px 5% 10px 18%;
		width: 100%;
		height: 100%
	}

	.about .box-card {
		width: 80%;
		margin-bottom: 20px;
	}
</style>
